<template>
	<view>
		<view class="list">
			<uni-swipe-action>
			    <uni-swipe-action-item class="list-item" v-for="(item,index) in list" :key="index" :right-options="swipeOption" @click="goodsDelete(index)">
					<view class="item-main">
						<view class="item-top">
							<view class="item-order">
								<text>快递单号：{{item.logistics_number}}</text>
							</view>
							<view class="item-time">
								<text>{{item.time}}</text>
							</view>
						</view>
						<view class="item-content">
							<view class="item-image">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="item-detail">
								<view class="item-title">
									<text>{{item.title}}/{{item.good_size}}件</text>
								</view>
								<view class="item-info">
									<view class="item-type">
										<text>{{item.good_type}}</text>
									</view>
									<view class="item-number">
										<text>数量：{{item.good_number}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
			    </uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<view class="bottom">
			<view class="bottom-btn">
				<view class="btn-item" @click="goPage('/pages/centralized/insert')">
					<text>手动录入</text>
				</view>
				<view class="btn-item" @click="submitConfirm">
					<text>确认集运</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {pickExpressAppointmentInsertOrEdit} from '@/api/order.js';
	export default {
		data() {
			return {
				list: [],
				swipeOption: [{text: '删除', style: {backgroundColor: '#E6201A'}}]
			}
		},
		onLoad() {
			uni.$on('insertGoods', data => {
				if (!data || !data.length) {
					return;
				}
				let time = (new Date()).getTime(),
					ymd = this.$u.timeFormat (time, 'yyyy.mm.dd hh.MM.ss');
				this.list = [...this.list, ...data.map(item => {
					return {
						image: item.images[0].image,
						title: item.title,
						logistics_number: item.logistics_number,
						good_type: item.good_type,
						good_size: item.good_size,
						good_number: item.good_number,
						time: ymd,
						images: item.images,
						logistics_name: item.logistics_name,
						warsehouseSelectedInfo: item.warsehouseSelectedInfo
					};
				})];
			});
		},
		onUnload() {
			uni.$off('insertGoods');
		},
		methods: {
			async submitConfirm() {
				try{
					if (!this.list || !this.list.length) {
						throw new Error('请先录入数据');
					}
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					for (let item of this.list) {
						let data = {
							is_pc: 1,
							come_type: 1,
							warehouse: item.warsehouseSelectedInfo.warehouse_id,
							good: [{
								logistics_number: item.logistics_number,
								good_size: item.good_size,
								good_number: item.good_number,
								good_type: item.good_type,
								good_quantity: item.images.map(i => i.title),
								good_pic: item.images.map(i => i.image),
								logistics_name: item.logistics_name
							}]
						};
						await pickExpressAppointmentInsertOrEdit(data);
					}
					uni.hideLoading();
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					});
					this.list = [];
				}catch(e){
					uni.hideLoading();
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				}
			},
			goodsDelete(index) {
				this.list.splice(index, 1);
			},
			goPage(path){
				uni.navigateTo({
					url:path,
					fail() {
						uni.switchTab({
							url:path
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #FFF;
}
.list{
	padding: 30rpx;
	box-sizing: border-box;
	.list-item{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		
		.item-main {
			padding: 24rpx;
			box-sizing: border-box;
			
			.item-top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				border-bottom: 2rpx solid #F5F5F5;
				padding-bottom: 22rpx;
				.item-order{
					color: #333;
				}
				.item-time{
					color: #999;
				}
			}
			.item-content{
				padding-top: 22rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.item-image{
					width: 120rpx;
					height: 120rpx;
					image{
						width: inherit;
						height: inherit;
						border-radius: 12rpx;
					}
				}
				.item-detail{
					width: 504rpx;
					.item-title{
						font-size: 30rpx;
						font-weight: bold;
						color: #333;
						padding-bottom: 22rpx;
					}
					.item-info{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 26rpx;
						font-weight: 500;
						.item-type{
							color: #E6201A;
						}
						.item-number{
							color: #333;
						}
					}
				}
			}
		}
	}
}
.bottom{
	width: 100%;
	height: 150rpx;
	.bottom-btn{
		position: fixed;
		width: 100%;
		bottom: calc(var(--window-bottom) + 40rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		.btn-item{
			width: 336rpx;
			height: 88rpx;
			border-radius: 16rpx;
			border: 2rpx solid #E6201A;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
			&:first-child{
				background-color: #FFF;
				color: #E6201A;
			}
			&:last-child{
				background-color: #E6201A;
				color: #FFF;
			}
		}
	}
}
</style>
